<template>
  <div class="dayin">
    <el-button type="primary" @click="print()" class="dayin_btn">打印预览</el-button>
    <!-- <el-popconfirm
      confirm-button-text="好的"
      cancel-button-text="不用了"
      icon-color="red"
      title="是否将此订单设置为待发货？"
      @confirm="set_DeliveryStatus"
    >
      <el-button  type="primary" slot="reference" style="margin-bottom: 10px;"> 打印预览</el-button>
    </el-popconfirm> -->

    <div ref="print" id="printArea">
      <h3 style="text-align: center">{{ Infomation }}</h3>
      <!-- <span style="display:block;text-align: center;margin-top:-10px;margin-bottom:10px;">{{formatterTime(bottoms.order_date)}}</span> -->
      <div class="div_span">
        <div>
          <span>客户： {{ bottoms.customer_name }}</span>
          <span>客户电话：{{ bottoms.contact_phone }}</span>
          <span>开单日期：{{ formatterTime(bottoms.order_date) }}</span>
        </div>
        <!-- <span style="word-break: break-all"
          >物流地址： {{ bottoms.customer_address }}</span
        > -->
      </div>
      <table class="table_tbs" style="border-collapse: collapse" cellspacing="0">
        <tr>
          <td  class="td_1">货品名称</td>
          <td  class="td_1">型号</td>
          <td  class="td_1">规格</td>
          <td  class="td_1">单位</td>
          <td  class="td_1">数量</td>
          <td  class="td_1">原价</td>
          <td  class="td_1">折扣</td>
          <td  class="td_1">单价</td>
          <td  class="td_1">货款</td>
          <td  class="td_2">备注</td>
        </tr>
        <tr style="width: 100%" v-for="(item, index) in dayinlist" :key="index">
          <td class="td_1">
            {{ item.product?item.product.product_name:'' }}
          </td>
          <td  class="td_1">
            {{ item.model_number?item.model_number.model_number:'' }}
          </td>
          <td  class="td_1">
            {{ item.specification?item.specification.specification:'' }}
          </td>
          <td class="td_1">
            套
          </td>
          <td class="td_1">
            {{ item.num }}
          </td>
        
          <td  class="td_1">
            {{ item.models_field?item.models_field.unit_price:"" }}
          </td>
          <td class="td_1">
            {{ item.models_field?item.models_field.discount:'' }}
          </td>
          <td  class="td_1">
            {{ item.models_field?item.models_field.unit_price:'' - item.models_field?item.models_field.discount:'' }}
          </td>
          <td  class="td_1">
            {{ item.receivables }}
          </td>
          <td  class="td_1" style="max-width:150px;text-align: left;">
            {{ item.remark }}
          </td>
        </tr>
        <tr>
          <td >合计</td>
          <td  colspan="2">{{ transformation(bottoms.receivables) }}</td>
          <td>{{ bottoms.num }}</td>
          <td colspan="2"></td>
          <td>{{ bottoms.num }}</td>
          <td></td>

        </tr>
      </table>
      <div class="list_order">
       
        <el-row style="width: 50%;">
          <el-col :span="5"> 业务员 : </el-col>
          <el-col :span="19">
            {{ bottoms.company_name }}{{bottoms.company_phone}}
          </el-col>
        </el-row>
        <el-row style="width: 50%;">
          <el-col :span="5"> 开单人 : </el-col>
          <el-col :span="19">
            {{ bottoms.caozuoyuan }}{{bottoms.caozuoyuan_phone}}
          </el-col>
        </el-row>
      </div>
      <el-row>
        <el-col :span="5"> 公司地址 : </el-col>
        <el-col :span="19">
          1.河南省南阳市雪枫路万豪旗舰店。<br>
          2.河南省南阳市长江路枣林家具城B馆2楼。全国服务热线:400-1122-983
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="5"> 注意事项 : </el-col>
        <el-col :span="19">
          收货时请校对型号、数量、质量，如有不符及时联系，谢谢配合。
        </el-col>
      </el-row>
    </div>

    <div style="page-break-after: always"></div>
  </div>
</div></div></template>

<script>
import { setDeliveryStatus } from "@/api/product/index";
export default {
  data() {
    return {
      dayinlist: [],
      strDate: "",
      bottoms: {
        warehouse_name: "",
        num:0,
        company_name: "",
        company_phone:"",
        receivables: "",
        balance: "",
        qiankuan: "",
        contact_phone: "",
        customer_address: "",
        customer_name: "",
        order_date: "",
        caozuoyuan:'',
        caozuoyuan_phone:''
      },
      Infomation: "",
      order_num: "",
    };
  },
  mounted() {
    this.dayinlist = JSON.parse(this.$route.query.data);
    this.Infomation = this.$store.getters.Infomation.company_name;
    console.log(this.$store.getters)
    this.bottoms.caozuoyuan=this.$store.getters.userInfo.company_name
    this.bottoms.caozuoyuan_phone=this.$store.getters.userInfo.phone
    this.currentTime();
    console.log(this.dayinlist);
    this.bottoms.balance = this.dayinlist[0].customer?this.dayinlist[0].customer.balance:'';
    this.bottoms.contact_phone = this.dayinlist[0].customer?this.dayinlist[0].customer.contact_phone:'';
    this.bottoms.customer_address = this.dayinlist[0].customer?this.dayinlist[0].customer.customer_address:'';
    this.bottoms.customer_name = this.dayinlist[0].customer?this.dayinlist[0].customer.customer_name:'';
    this.bottoms.order_date = this.dayinlist[0].order_date;
    let num=0
    this.dayinlist.forEach((item) => {

      // 发货库
      this.order_num = Number(this.order_num) + Number(item.num);
      if (item.warehouse) {
        this.bottoms.warehouse_name = item.warehouse.warehouse_name;
      }
      // 业务员
      if (item.account_executive) {
        this.bottoms.company_name = item.account_executive.company_name;
        this.bottoms.company_phone = item.account_executive.phone
      }

      // 总金额
      if (item.num != 0) {
        this.bottoms.receivables = Number(this.bottoms.receivables) + Number(item.receivables);
      }
      // 数量
       this.bottoms.num = Number(this.bottoms.num)+Number(item.num)
     
    
    
    });
  },
  methods: {
    // 输入的金额进行大写转换
    transformation(val) {
      var fraction = ["角", "分"];
      var digit = ["零", "壹", "贰", "叁", "肆", "伍", "陆", "柒", "捌", "玖"];
      var unit = [
        ["元", "万", "亿"],
        ["", "拾", "佰", "仟"],
      ];
      var head = val < 0 ? "欠" : "";
      val = Math.abs(val);
      var s = "";
      for (var i = 0; i < fraction.length; i++) {
        s += (
          digit[Math.floor(val * 100 * Math.pow(10, i) / 10) % 10] + fraction[i]
        ).replace(/零./, "");
      }

      s = s || "";
      val = Math.floor(val);
      for (var i = 0; i < unit[0].length && val > 0; i++) {
        var p = "";
        for (var j = 0; j < unit[1].length && val > 0; j++) {
          p = digit[val % 10] + unit[1][j] + p;
          val = Math.floor(val / 10);
        }
        s = p.replace(/(零.)*零$/, "").replace(/^$/, "零") + unit[0][i] + s;
      }
      return head + s.replace(/(零.)*零元/, "元").replace(/(零.)+/g, "零").replace(/^整$/, "零元");
    },
    formatterTime(data) {
      return /\d{4}-\d{1,2}-\d{1,2}/g.exec(data).splice(0, 11)[0];
    },
    set_DeliveryStatus() {
      let ids_s = [];
      this.dayinlist.forEach((item) => {
        ids_s.push(item.id);
      });
      setDeliveryStatus({ ids: ids_s }).then((res) => {
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: "操作成功",
          });
          this.print();
        }
      });
    },
    /**
     * 获取当前时间
     */
    currentTime() {
      var date = new Date();
      var year = date.getFullYear(); //月份从0~11，所以加一
      let month = date.getMonth();
      console.log("month", month);
      var dateArr = [
        date.getMonth() + 1,
        date.getDate(),
        date.getHours(),
        date.getMinutes(),
        date.getSeconds(),
      ];
      //如果格式是MM则需要此步骤，如果是M格式则此循环注释掉
      for (var i = 0; i < dateArr.length; i++) {
        if (dateArr[i] >= 1 && dateArr[i] <= 9) {
          dateArr[i] = "0" + dateArr[i];
        }
      }
      this.strDate =
        year +
        "/" +
        dateArr[0] +
        "/" +
        dateArr[1] +
        " " +
        dateArr[2] +
        ":" +
        dateArr[3] +
        ":" +
        dateArr[4];
    },
    print() {
      this.$print(this.$refs.print);
    },
  },
};
</script>
<style scoped>
.dayin {
  padding: 25px;
  box-sizing: border-box;
}

/* 
长 75mm
宽 45mm */
#printArea {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  margin: 0 auto;
}

#printArea>div:first-child {
  margin-top: 0px;
}

#printArea table {
  width: 100%;
  border-collapse: collapse;
}

#printArea table th {
  color: #333;
  padding: 5px 0;
  font-size: 26px;
}

#printArea table {
  border: 1px solid #000;
}

#printArea table td,
table th {
  border: 1px solid #000;
  text-align: center;
  padding: 0;
  margin: 0;
  padding: 5px;
  box-sizing: border-box;
}
#printArea table tr td {
  min-height: 35px;
  line-height: 35px;
}

/* #printArea table thead th {
  background-color: #0a8fa1;
} */

#printArea table tr th,
table tr td {
  padding: 5px 12px;
}

.procedure {
  word-wrap: break-word;
}

.dayin_btn {
  background: #0a8fa1;
  border: none;
  margin: 20px 0;
}

.list_order {
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
}


.div_span {
  margin-bottom: 5px;
}

.div_span div {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.table_tb tr {
  display: flex;
}

.table_tb tr td {
  font-size: 14px;
  display: block;
  height: auto;
  word-break: break-all;
}

@media print {
  .dayin {
  padding: 25px;
  box-sizing: border-box;
}

/* 
长 75mm
宽 45mm */
#printArea {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  margin: 0 auto;
}

#printArea>div:first-child {
  margin-top: 0px;
}

#printArea table {
  width: 100%;
  border-collapse: collapse;
}

#printArea table th {
  color: #333;
  padding: 5px 0;
  font-size: 26px;
}

#printArea table {
  border: 1px solid #000;
}

#printArea table td,
table th {
  border: 1px solid #000;
  text-align: center;
  padding: 0;
  margin: 0;
  padding: 5px;
  box-sizing: border-box;
}
#printArea table tr td {
  min-height: 35px;
  line-height: 35px;
}

/* #printArea table thead th {
  background-color: #0a8fa1;
} */

#printArea table tr th,
table tr td {
  padding: 5px 12px;
}

.procedure {
  word-wrap: break-word;
}

.dayin_btn {
  background: #0a8fa1;
  border: none;
  margin: 20px 0;
}

.list_order {
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
}


.div_span {
  margin-bottom: 5px;
}

.div_span div {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.table_tb tr {
  display: flex;
}

.table_tb tr td {
  font-size: 14px;
  display: block;
  height: auto;
  word-break: break-all;
}
}
</style>
